<template>
  <div class="word-card">
    <!-- 单词列表切换 -->
    <ul class="word-lists">
      <h2>选择单词书:</h2>
      <li v-for="key in Object.keys(allUnitsData)" :key="key" :class="{ active: currentUnit === key }"
        @click="switchUnit(key)">
        {{ key }}
      </li>
    </ul>
    <h2 class="word-display">
      <span v-for="(char, index) in currentWord" :key="index" :style="{ color: getFingerClass(char) }">{{ char }}</span>
    </h2>
    <input v-model="inputValue" placeholder="请输入..." type="text" @keydown.enter="checkWord" />
    <button @click="playCurrentWordSound">播放单词</button>
    <p v-if="isCorrect !== null">
      <span v-if="isCorrect" style="color: green">正确！</span>
      <span v-else style="color: red">错误！</span>
    </p>
    <div class="score-board">
      <p>正确次数: {{ correctCount }}</p>
      <p>错误次数: {{ wrongCount }}</p>
    </div>
    <div class="toggle-container">
      <span>显示中文</span>

      <input type="checkbox" v-model="showChinese" />
    </div>

    <p v-if="showChinese">
      {{ currentList[currentWord] }}
    </p>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
// @ts-ignore
import { getFingerClass } from '@/utils/fingerColors'
import '@/assets/styles/fingerColors.css' // 确保 CSS 正确导入
const unitOne = {
  // 重点单词
  supermarket: '超市',
  meat: '肉',
  fish: '鱼肉',
  chicken: '鸡肉',
  which: '哪一个',
  better: '更好的',
  food: '食物',
  juice: '果汁',
  water: '水',
  pay: '付款，交款',
  sandwiches: '三明治',
  hamburgers: '汉堡包',
  donuts: '甜甜圈',
  cupcakes: '纸杯蛋糕',
  subject: '课程；学科',
  best: '最好的',
  favourite: '最喜欢的',
  useful: '有用的',
  difficult: '困难的',
  interesting: '有趣的',
  English: '英语',
  PE: '体育',
  Chinese: '语文',
  maths: '数学',
  calligraphy: '书法',
  science: '科学',
  art: '美术；艺术',
  read: '读',
  draw: '画',
  sheep: '绵羊',
  bear: '熊',
  minute: '分钟',
  put: '写上，标上；放',

  // 重点短语
  'look at': '看一看',
  'in the supermarket': '在超市里',
  'a bottle of': '一瓶',
  'go and pay': '去付钱',
  'milk shake': '奶昔',
  'apple juice': '苹果汁',
  'do/does best': '做得棒',
  'over there': '在那边',
  'around the world': '环游世界',
  'fairy tale': '童话',
  'science fiction': '科幻小说',
  'wait a minute': '等一下',
  'put my name on': '签上我的名字',
  'keep birds': '养鸟',
  'grow flowers': '养花',
  'throw beanbags': '扔沙包',
  'jump rope': '跳绳',

  'Chicken or fish, which do you like better? I like fish better.':
    '鸡肉还是鱼肉，你更喜欢哪一种？——我更喜欢鱼肉。',
  "Let's go and pay.": '让我们去付钱吧。',
  'Which class do you like best? I like English best. I do best in English.':
    '你最喜欢哪门课？——我最喜欢英语。我英语学得最好。',
  "Maths is my favourite subject. It's very useful.": '数学是我最喜欢的学科。它很有用。',
  "I like Chinese best. It's difficult but interesting.": '我最喜欢语文。它很难但很有趣。',
  'I like reading, but I like drawing better.': '我喜欢读书，但是我更喜欢画画。',
  'Can I have it? Yes, but wait a minute, please. I will put my name on it.':
    '我能拥有它吗？——可以，但请稍等一下。我要把我的名字写上。'
}
const unitTwo = {
  // 重点单词
  must: '应该；必须',
  brother: '兄弟',
  together: '一起',
  pass: '传递',
  again: '再，又',
  polite: '礼貌的',
  finish: '完成',
  homework: '家庭作业',
  use: '使用',
  half: '半小时；一半',
  late: '晚',
  outside: '在外面',
  cartoon: '动画',
  ask: '要求',
  join: '参加',
  clean: '干净的；打扫',
  bright: '明亮的',
  dry: '干燥的',
  fix: '修理',
  copy: '抄写',
  dirty: '脏的',
  wash: '洗，洗涤',
  broken: '破损的',
  plant: '植物',

  // 重点短语
  'stay at': '待在……',
  'wait for': '等',
  'ask for': '要求',
  'come to my house': '来我家',
  'stay at home': '待在家里',
  'tidy my room': '整理我的房间',
  'walk the dog': '遛狗',
  'need to': '需要',
  'no problem': '没问题',
  'on your own': '独立地',
  'open the gift box': '打开礼物盒',
  'go out and play': '去外面玩',
  'join us': '加入我们',
  'this afternoon': '今天下午',
  'clean the window': '擦窗户',
  'fix the bike': '修理自行车',
  'water the plants': '给植物浇水',
  'wash his socks': '洗他的袜子',
  'keep your room tidy': '保持你的房间整洁',

  "Would you like to come to my house? Sorry I can't. I must stay at home.":
    '你愿意来我家吗？——对不起我不能。我必须待在家里。',
  'Would you please pass me that blue crayon? Here you are':
    '请你把那只蓝色的蜡笔递给我好吗？——给你。',
  'Can I use your computer? Sorry. I need to finish my homework first':
    '我可以用你的电脑吗？——对不起。我需要先完成我的家庭作业。',
  'You should do it on your own.': '你应该独立完成。',
  "The windows are dirty. Shall we clean them this afternoon? Yes, let's.":
    '窗户脏了。我们今天下午擦窗户好吗？——好的，让我们擦吧。'
}
const unitThree = {
  // 重点单词
  autumn: '秋天',
  calendar: '日历',
  whole: '整个的',
  family: '家庭；家人',
  fruit: '水果',
  full: '满的',
  climb: '攀登；爬',
  usually: '通常地；惯常地',
  him: '他（宾格）',
  sound: '听起来',
  holiday: '假日',
  flag: '旗帜',
  everywhere: '到处',
  dress: '穿衣；打扮',
  night: '夜，夜晚',
  firework: '烟花',
  as: '如同，如同',
  motherland: '祖国；故土',

  // 重点短语
  'moon cake': '月饼',
  'Chinese calendar': '农历',
  'get together': '聚到一起',
  'the Mid-Autumn Festival': '中秋节',
  'the Double Ninth Festival': '重阳节',
  'the Lantern Festival': '元宵节',
  'the Dragon Boat Festival': '端午节',
  'climb mountains': '爬山',
  'visit my grandpa': '看望我的外祖父',
  'the Spring Festival': '春节',
  'National Day': '国庆节',
  'more about': '更多关于',
  'hang out': '挂出',
  'the national flag': '国旗',
  "Tian'anmen Square": '天安门广场',
  'as ... as': '像……一样',

  "When is the Mid-Autumn Festival? It's on the fifteenth day of the eighth month in the Chinese calendar.":
    '中秋节在什么时候？——在农历八月十五。',
  'The whole family gets together.': '全家团聚。',
  'We eat moon cakes and fruits, and enjoy the bright full moon.':
    '我们吃月饼和水果，并欣赏明亮的满月。',
  'Old people climb mountains with their families.': '老年人和他们的家人去爬山。',
  'They usually do something for the old.': '他们通常为老年人做一些事。',
  'Can you tell me more about the Chinese National Day? We all dress up in our best clothes. We hang out the national flags.':
    '你能告诉我更多关于国庆节的事吗？——我们都穿上自己最好的衣服。我们挂出国旗。',
  "We go to Tian'anmen Square to enjoy all the flowers.": '我们去天安门广场欣赏所有的鲜花。',
  'At night we watch the fireworks. The sky is as bright as the day. We love our motherland.':
    '在晚上我们看烟花。天空像白天一样明亮。我们爱我们的祖国。',
  "Every five years, there will be a big parade on Tian'anmen Square.":
    '每五年，天安门广场都将会有一次盛大的游行。'
}
const unitFive = {
  tongue: '语言/舌头',
  east: '东部',
  capital: '首都',
  Toronto: '多伦多',
  Sydney: '悉尼',
  Canada: '加拿大',
  Australia: '澳大利亚',
  French: '法语',
  English: '英语',
  morning: '早晨/上午',
  river: '河/江',
  long: '长的',
  clock: '时钟',
  Thames: '泰晤士河',
  London: '伦敦',
  wide: '宽的',
  China: '中国',
  Russia: '俄罗斯',
  Europe: '欧洲',
  Asia: '亚洲',
  city: '城市',
  afternoon: '午后/下午',
  Ottawa: '渥太华',
  leaf: '树叶',
  map: '地图',
  show: '显示/出示/展示',

  'mother tongue': '母语',
  'New York': '纽约',
  'North America': '北美',
  'both and': '……和……',
  'the USA': '美国',
  'Washington DC': '华盛顿特区',
  'in Europe': '在欧洲',
  'big clock': '大钟',
  'Big Ben': '大本钟',
  'on the river': '在河上',
  'feel at home': '感到自在',
  'show you around the city': '带你逛逛这个城市',
  'on the map': '在地图上',
  'a maple leaf': '一片枫叶',
  'national flag': '国旗',
  'in the east of': '在……的东部',
  'in the west of': '在……的西部',
  'in the north of': '在……的北部',
  'in the south of': '在……的南部',
  'in the centre of': '在……的中间',

  "Where are you from? I'm from New York in the U.S.A.": '你来自哪里? 我来自美国纽约。',
  "Where is he from? He's from Toronto in Canada.": '他来自哪里? 他来自加拿大的多伦多。',
  "Where is the U.K.? It's in Europe.": '英国在哪里? 它在欧洲。',
  'Welcome to London.': '欢迎来到伦敦。',
  "Where is Ottawa? It's in the east of the country.": '渥太华在哪里? 它在这个国家的东部。'
}
const unitSix = {
  British: '英国的',
  fun: '有趣的',
  exciting: '令人兴奋的',
  tennis: '网球',
  golf: '高尔夫球运动',
  volleyball: '排球',
  rugby: '橄榄球运动',
  badminton: '羽毛球',
  baseball: '棒球',
  basketball: '篮球',
  with: '和',
  friend: '朋友',
  popular: '流行的',
  football: '足球',
  ski: '滑雪',
  winter: '冬天',
  diving: '跳水',
  team: '球队',
  Canadian: '加拿大人',
  tired: '疲倦的',

  'favourite game': '最喜爱的运动',
  'horse racing': '赛马',
  'sports lover': '运动爱好者',
  'play basketball': '打篮球',
  'every day': '每天',
  'ice hockey': '冰球运动；冰上曲棍球',
  'American football': '美式足球',
  'good luck': '好运',
  'Chinese kung fu': '中国功夫',
  'be good at': '擅长',
  'table tennis': '乒乓球',
  taekwondo: '跆拳道',
  'feel so good': '感觉很好',
  'take a break': '休息一下',
  'ice sports': '冰上运动',
  'in the world': '在世界上',
  'go skiing': '去滑雪',
  'old people': '老年人',
  'ball games': '球类运动；球赛',
  'water sports': '水上运动',
  'every winter': '每年冬天',

  "What's your favourite game? It's rugby.": '你最喜欢的运动是什么？ 它是橄榄球。',
  'What sports do you like in the U.K.? We like rugby, football, tennis, and golf.':
    '在英国你喜欢什么运动？ 我们喜欢橄榄球、足球、网球和高尔夫球。',
  'What sports does he like in the U.S.A.? He likes American football, baseball, and volleyball.':
    '在美国他喜欢什么运动？ 他喜欢美式足球、棒球和排球。',
  'American football is popular. So is baseball.': '美式足球很受欢迎。 棒球也是如此。',
  'Why do you play basketball every day? I enjoy playing with my friends.':
    '为什么你每天都打篮球？ 我喜欢和我的朋友们一起玩。',
  'What are you good at? We are good at ice sports.': '你们擅长什么？ 我们擅长冰上运动。',
  'Shall we take a break? Sure.': '我们可以休息一下吗？ 当然可以。'
}

const allUnitsData: any = {
  // UNIT ONE
  unitOne: unitOne,
  unitTwo: unitTwo,
  unitThree: unitThree,
  unitFive: unitFive,
  unitSix: unitSix
}

const currentWord = ref<string>('') // 当前单词
const inputValue = ref('')
const showChinese = ref(false) // 控制是否显示中文
// 当前选择的单词列表
const currentUnit = ref('unitOne') // 当前选择的单元
const currentList = ref(allUnitsData[currentUnit.value]) // 当前单词列表

// 记录得分
const correctCount = ref(0) // 正确次数
const wrongCount = ref(0) // 错误次数

// 是否输入正确
const isCorrect = ref<null | boolean>(null)

// 切换单词列表
const switchUnit = (key: string) =>
{
  currentUnit.value = key
  currentList.value = allUnitsData[key]
  initializeWord() // 切换列表时初始化一个新单词
}

// 播放当前单词的语音
const playSound = (word: string) =>
{
  const msg = new SpeechSynthesisUtterance(word)
  msg.lang = 'en-US' // 可以设置成 'zh-CN' 播报中文
  window.speechSynthesis.speak(msg)
}

// 随机选择一个单词
const getRandomWord = () =>
{
  const keys = Object.keys(currentList.value)
  const randomIndex = Math.floor(Math.random() * keys.length)
  return keys[randomIndex]
}

// 初始化当前单词
const initializeWord = () =>
{
  currentWord.value = getRandomWord()
}

// 播放当前单词的语音
const playCurrentWordSound = () =>
{
  playSound(currentWord.value)
}

// 在组件挂载时初始化单词
onMounted(() =>
{
  initializeWord() // 组件挂载时初始化单词
})

// 检查用户输入的单词是否正确
const checkWord = () =>
{
  if (inputValue.value === currentWord.value)
  {
    isCorrect.value = true // 正确时的状态
    correctCount.value++ // 增加正确计数
    getNextWord() // 切换到新单词
  } else
  {
    isCorrect.value = false // 错误时的状态
    wrongCount.value++ // 增加错误计数
    playErrorSound() // 播放错误提示音
  }
}

// 切换到下一个单词的逻辑
const getNextWord = () =>
{
  inputValue.value = '' // 清空输入框
  isCorrect.value = null // 重置状态
  currentWord.value = getRandomWord() // 获取新的单词
}

// 播放错误提示音（通过语音播报 "错误"）
const playErrorSound = () =>
{
  const msg = new SpeechSynthesisUtterance('错误')
  msg.lang = 'zh-CN' // 设置成中文
  window.speechSynthesis.speak(msg)
}
</script>

<style scoped>
.word-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid #ddd;
  padding: 20px;
  border-radius: 10px;
  background-color: #f9f9f9;
  width: 90%;
  margin: 0 auto;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.word-lists {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.word-lists li {
  cursor: pointer;
  padding: 5px 10px;
  border: 1px solid #ccc;
  height: 35px;
  border-radius: 5px;
  background-color: #f0f0f0;
  transition: background-color 0.3s;
}

.word-lists li:hover {
  background-color: #e0e0e0;
}

.word-lists li.active {
  background-color: #007bff;
  color: white;
}

.word-card p {
  font-size: 20px;
  color: #333;
}

.word-display {
  margin: 10px;
  font-size: 40px;
}

.word-card span {
  font-weight: bold;
  padding: 0 1px;
}

.toggle-container {
  display: flex;
  align-items: center;
  /* 垂直居中 */
  margin-top: 20px;
  width: 100%;
  /* 确保容器宽度足够 */
  white-space: nowrap;
  /* 防止换行 */
}

input {
  /* margin-top: 20px; */
  padding: 10px;
  font-size: 18px;
  width: 100%;
  border-radius: 5px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.25);
}

button {
  margin-top: 10px;
  padding: 10px;
  font-size: 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
</style>
